<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
<script>
    // 需求: 通过ajax请求同服务器下的文件(文本文件 html/css/js/json)


    // 请求状态  xhr.readyState  从请求被创建 一直 到请求被服务器接收并处理都有一个对应的状态与之对象
    // 0   请求未初始化(只是创建了请求,还未配置请求相关的信息)
    // 1   请求已经建立，但是还没有发送（已经配置好了请求相关的信息,但是还没有调用 send())。
    // 2   请求已发送，正在处理中（通常现在可以从响应中获取内容头）
    // 3   请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成
    // 4   响应已完成；您可以获取并使用服务器的响应了(返回响应的结果)。

    // 响应状态码(一般是3位数) xhr.status   服务端处理响应,返回响应的结果,但是结果并不一定是成功的 
    // 1xx  信息，服务器收到请求，需要请求者继续执行操作
    // 2xx  成功，操作被成功接收并处理
    // 3xx  重定向，需要进一步的操作以完成请求(重定向/缓存)
    // 4xx  客户端错误，请求包含语法错误或无法完成请求(语法有误/路径有误/请求被拒绝)
    // 5xx  服务器有误, 服务器在处理请求的过程中发生了错误

    // 常见状态码
    // 200：ok，页面正确打开，并得到完整的响应内容。
    // 301：被请求的资源已永久移动到新位置
    // 302：请求的资源临时从不同的 URI响应请求
    // 304：缓存
    // 404：页面不存在。
    // 500：常指后端代码发生错误
    // 503：由于临时的服务器维护或者过载，服务器当前无法处理请求。


    // (1) 创建http请求  => 通过构造函数创建
    var xhr = new XMLHttpRequest();
    console.log(xhr);
    console.log(xhr.readyState); // 0

    // (2) 配置请求相关的信息 
    // xhr.open(type,url,async);
    // type 请求方式(get/post)
    // url  请求的地址(一般是后端接口地址,同服务器下的文本文件也可以(get))
    // async 是否异步(默认true => 异步, false=>已被浏览器弃用,不建议使用)
    xhr.open("get","../data/1.txt",true);
    console.log(xhr.readyState); // 1  配置后,发送前


    // (3) 发送请求
    xhr.send();
    console.log(xhr.readyState); // 1  (请求发送后不会立即被服务端接收)


    // 服务端(后端),接收请求,处理请求, 返回响应 => 需要时间
    // (4) 监听请求的状态(了解当前请求到了哪一步)  

    // onreadystatechange事件在加载时只做绑定, 等xhr.readyState改变时才会触发
    // onreadystatechange 监听到xhr.readyState改变时才会触发!!
    xhr.onreadystatechange = function(){ 
        console.log("xhr.readyState改变了",xhr.readyState);

        // xhr.readyState == 4  请求有结果,服务端返回响应
        // xhr.status == 200    响应的结果也是成功的
        if(xhr.readyState == 4 && xhr.status == 200)    {

            // (5) 获取响应数据
            var result = xhr.responseText;
            console.log(result);

        }
    }

    console.log("同步代码:76 页面加载完毕");





</script>
</html>